import { createApp, reactive } from "vue";
import MessageComponents from "./MessageElm.vue";

interface stutsType {
  type: "info" | "warning" | "danger" | "success";
  message: string;
}
export type stutsArray = Array<stutsType>;
interface message {
  success: (message: string) => void;
  error: (message: string) => void;
  warn: (message: string) => void;
  info: (message: string) => void;
  custom: (options: stutsType) => void;
}
const messageArr = reactive<stutsArray>([]);

const unShiftArr = () => messageArr.shift();

const delSome = (index: number) => messageArr.splice(index, 1);

const mountNode = document.createElement("div");
mountNode.id = "coustomMessage";
document.body.appendChild(mountNode);
createApp(MessageComponents, {
  status: messageArr,
  del: unShiftArr,
  delSome,
}).mount("#coustomMessage");
const success = (message: string) => easyShow(message, "success");

const error = (message: string) => easyShow(message, "danger");
const easyShow = (message: string, type: stutsType["type"]) =>
  messageArr.push({
    type,
    message,
  });
const warn = (message: string) => easyShow(message, "warning");

const info = (message: string) => easyShow(message, "info");

const custom = (options: stutsType) => easyShow(options.message, options.type);

export const Message: message = { success, error, warn, custom, info };
